<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式聊天界面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/copychat.css" class="normal_mode">
    <link rel="stylesheet" href="./css/copy_setup.css">
</head>

<body>

    <section>
        <!-- 显示黑色遮罩层 -->
        <div class="head_portrait_hei">
            <div class="model_content">
                <div class="modal_header">
                    <div class="modal_title">
                        <h5 class="glyphicon glyphicon-cog"></h5>
                        <i>Setting</i>
                    </div>
                    <button class="glyphicon glyphicon-remove modal_btn"></button>
                </div>
                <div class="modal_body">
                    <ul class="modal_tab">
                        <li class="modal_nav_item"><a href="#" class="item_active">Account</a></li>
                        <li class="modal_nav_item"><a href="#">Notification</a></li>
                        <li class="modal_nav_item"><a href="#">Security</a></li>
                    </ul>
                    <div class="tab_content">
                        <div class="tab_pane">
                            <label for="toggle" id="switch">
                                <input type="checkbox" id="toggle">
                                <span class="circuit_changer">
                                    <div class="switch_on">正常</div>
                                    <div class="switch_off">深色</div>
                                </span>
                            </label>
                        </div>
                        <div class="tab_pane">2</div>
                        <div class="tab_pane">3</div>
                    </div>
                </div>
                <div class="modal_footer">
                    <button class="btn_primary">Save</button>
                </div>
            </div>
        </div>
        <!-- 隐藏黑色遮罩层 -->
        <div class="head_portrait_bai"></div>
        <div class="lets">
            <ul class="tab_list">
                <li>
                    <a href="#">
                        <div class="head_portrait" title="个人头像"></div>
                    </a>
                </li>
                <li class="gree">
                    <!-- 信息 -->
                    <a href="#" class="ona">
                        <span class="glyphicon glyphicon-comment"></span>
                    </a>
                </li>
                <li>
                    <!-- 好友 -->
                    <a href="#">
                        <span class="glyphicon glyphicon-user"></span>
                    </a>
                </li>
                <li class="fl">
                    <!-- 星标好友 -->
                    <a href="#">
                        <span class="glyphicon glyphicon-star-empty"></span>
                    </a>
                </li>
                <li class="eye_protection">
                    <!-- 护眼模式 -->
                    <a href="#">
                        <span class="glyphicon glyphicon-leaf"></span>
                    </a>
                </li>
                <li id="head_portraits">
                    <!-- 设置 -->
                    <a href="#">
                        <span class="glyphicon glyphicon-cog"></span>
                    </a>
                </li>
                <li>
                    <!-- 退出登录页面 -->
                    <a href="index.html">
                        <span class="glyphicon glyphicon-off"></span>
                    </a>
                </li>
            </ul>
        </div>
        </div>
        <div class="content cona">
            <div class="sidebar hidden-md hidden-sm hidden-xs">
                <div class="sidebar-group">
                    <div class="header">
                        <span>Chats</span>
                        <ul></ul>
                    </div>
                    <form action=""><input type="search" name="" id="" placeholder="请输入..."></form>
                    <div class="group">
                        <ul class="list_group">
                            <li>
                                <div class="le"> <img src="https://w.wallhaven.cc/full/1p/wallhaven-1ppovv.png" alt="">
                                </div>
                                <div class="ri">
                                    <h5>小王</h5>
                                    <p>今天怎样，是不是感觉好多了</p>
                                </div>
                            </li>
                            <li>
                                <div class="le"> <img src="https://w.wallhaven.cc/full/1p/wallhaven-1ppovv.png" alt="">
                                </div>
                                <div class="ri">
                                    <h5>夏思宁</h5>
                                    <p>姐妹儿，我今天出门在地铁上碰见了一个帅哥</p>
                                </div>
                            </li>
                            <li>
                                <div class="le"> <img src="https://w.wallhaven.cc/full/1p/wallhaven-1ppovv.png" alt="">
                                </div>
                                <div class="ri">
                                    <h5>达达</h5>
                                    <p>这个乐高积木真的超级帅，而且还便宜</p>
                                </div>
                            </li>
                            <li>
                                <div class="le"> <img src="https://w.wallhaven.cc/full/1p/wallhaven-1ppovv.png" alt="">
                                </div>
                                <div class="ri">
                                    <h5>杰克</h5>
                                    <p>今天发生了什么事情？ssdhksadfksahfaskhfasdfaslfjskafasfsafsadf</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="chat">
                <div class="chat_header">
                    <div class="chat_header_user">
                        <span><img src="https://w.wallhaven.cc/full/1p/wallhaven-1ppovv.png" alt=""></span>
                        <div>
                            <h5>Karl Hubane</h5>
                            <p>Online</p>
                        </div>
                    </div>
                    <div class="chat_header_reply">对方正在回复中...</div>
                    <div class="chat_header_action">
                        <ul class="list_inline">
                            <li class="list_item"><a href="#"><span class="glyphicon glyphicon-earphone"></span></a>
                            </li>
                            <li class="list_item"><a href="#"><span
                                        class="glyphicon glyphicon-facetime-video"></span></a></li>
                            <li class="list_item"><a href="#"><span class="glyphicon glyphicon-list"></span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="chat_body">
                    <div class="messages">
                    </div>
                </div>
                <div class="chat_footer">
                    <div class="form">
                        <input type="text" name="" class="text_box_content" placeholder="Recipient's username...">
                        <div class="footer_btn">
                            <button class="glyphicon glyphicon-camera"></button>
                            <button class="glyphicon glyphicon-paperclip"></button>
                            <button class="glyphicon glyphicon-send send_button"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./js/copychat.js"></script>
</body>

</html>